<template>
  <div class="step">
    <div class="step-box">
      <p>理论生长进度</p>
      <div class="theory-step step-con">
        <li
          v-for="(item, index) in growthStepList"
          :key="index"
          :style="{
            width: item.thWidth,
            color: item.thDay ? 'rgba(0, 57, 71, 1)' : '#fff',
            backgroundColor: '#c1bebe',
          }"
          :title="
            '阶段:' +
              item.growthPhaseName +
              '  阶段生长总时间:' +
              item.theoryDurationDays +
              '天,   ' +
              '理论生长时间:' +
              item.thDay +
              '天'
          "
        >
          <div class="content-one">{{ item.growthPhaseName }}</div>
          <p
            :style="{
              width:
                item.thDay === item.theoryDurationDays
                  ? '100%'
                  : item.specThWidth,
              backgroundColor: item.thDay ? item.color : 'rgba(0,0,0,0)',
            }"
            :title="
              '阶段:' +
                item.growthPhaseName +
                '  阶段生长总时间:' +
                item.theoryDurationDays +
                '天,   ' +
                '理论生长时间:' +
                item.thDay +
                '天'
            "
          ></p>
          <!-- <div class="show-time">
            <span>{{ "阶段生长总时间:" + i虫害统计tem.theoryDurationDays + "天" }}</span>
            <span>{{ "理论生长时间:" + item.thDay + "天" }}</span>
          </div>-->
        </li>
      </div>
    </div>
    <div class="step-box">
      <p style="margin-bottom: 40px">
        实际生长进度
        <span class="changeStepBtn" @click="changeStep">调整进度</span>
      </p>

      <div class="actual-step step-con" :style="{width: aclLongWith}">
        <li
          v-for="(item, index) in growthStepList"
          :key="index"
          :style="{
            width: item.aclWidth,
            color: item.thDays ? 'rgba(0, 57, 71, 1)' : '#fff',
            backgroundColor: '#c1bebe',
          }"
          :title="
            '阶段:' +
              item.growthPhaseName +
              '  阶段生长总时间:' +
              item.realDurationDays +
              '天,   ' +
              '实际生长时间:' +
              item.thDays +
              '天'
          "
        >
          <div class="content-one">{{ item.growthPhaseName }}</div>
          <p
            :style="{
              width:
                item.thDays === item.realDurationDays
                  ? '100%'
                  : item.specThWidths,
              backgroundColor: item.thDays ? item.color : 'rgba(0,0,0,0)',
            }"
            :title="
              '阶段:' +
                item.growthPhaseName +
                '  阶段生长总时间:' +
                item.realDurationDays +
                '天,   ' +
                '实际生长时间:' +
                item.thDays +
                '天'
            "
          ></p>
          <div
            v-if="item.statuss === 1 && item.thDays && item.specThstatus"
            :style="{ left: item.specThWidths || '100%' }"
            class="nowIcon"
          >
            <svg
              t="1638511115699"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2003"
              width="16"
              height="16"
            >
              <path
                d="M878.592 250.88q29.696 0 48.128 11.264t24.576 29.696 0 41.472-26.624 45.568q-82.944 92.16-159.744 180.224t-148.48 164.864q-19.456 20.48-45.568 31.744t-53.76 11.776-53.248-8.704-43.008-28.672q-39.936-44.032-82.944-90.112l-88.064-92.16q-43.008-46.08-85.504-90.624t-79.36-86.528q-17.408-19.456-22.528-40.448t1.024-38.4 23.552-28.672 45.056-11.264q35.84 0 98.816-0.512t137.728-0.512l153.6 0 150.528 0 125.952 0 79.872 0z"
                p-id="2004"
                fill="#ffffff"
              />
            </svg>
            <p>当前生长阶段</p>
          </div>
          <!-- <div class="show-time">
            <span>{{ "阶段生长总时间:" + item.theoryDurationDays + "天" }}</span>
            <span>{{ "理论生长时间:" + item.thDay + "天" }}</span>
            <span>{{ "实际生长时间:" + item.realDurationDays + "天" }}</span>
          </div>-->
        </li>
      </div>
    </div>
    <ChangeStepDialog
      ref="stepDialog"
      :batch-no="batchNo"
      :get-growth-list="growthList"
      :show.sync="showStepDialog"
      @closeDialog="(showStepDialog = false), handelData()"
    />
  </div>
</template>

<script>
import ChangeStepDialog from "./components/change-step-dialog";
import configurationApi from "@/api/digital-production/conservation-model/configuration/index";
// import { status } from 'nprogress';
export default {
  components: {
    ChangeStepDialog
  },
  props: {
    batchNo: {
      type: String,
      default: ""
    },
    nowDay: {
      type: [String, Number],
      default: ""
    },
    nowPhaseNo: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      growthStepList: [],
      colorList: [
        "rgba(66, 207, 122, 1)",
        "rgba(166, 214, 62, 1)",
        "rgba(255, 196, 0, 1)",
        "rgba(255, 140, 26, 1)",
        "rgba(0, 186, 173, 1)",
        "rgba(186, 241, 255, 1)",
        "#649ee6",
        "#747eef",
        "#c064e6",
        "#ed79c9"
      ],
      aclLongWith: "100%",
      showStepDialog: false,
      growthList: [],
      growthReadList: []
    };
  },
  watch: {
    batchNo(v) {
      if (v) {
        this.handelData();
        // this.handelrealData()
      }
    },
    nowPhaseNo(v) {
      if (v) {
        this.handelData();
        // this.handelrealData()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handelData() {
      configurationApi
        .queryGrowthCycle({
          batchNo: this.batchNo
        })
        .then(async res => {
          if (res.code === 1) {
            let data = res.data || {};
            this.growthStepList = data || [];
            const { data: ress } = await configurationApi.queryActualGrowDays({
              batchNo: this.batchNo
            });
            let thGrowthNum = JSON.parse(JSON.stringify(ress));
            let thGrowthNums = JSON.parse(JSON.stringify(ress));
            // data.forEach(item => {
            //   thGrowthNum = thGrowthNum + item.theoryDurationDays
            // })
            this.growthList = data || [];
            if (this.growthStepList.length > 0) {
              let aclNum = 0; // 当前实际生长总天数
              let thNum = 0; // 当前理论生长总天数
              this.growthStepList.forEach((item, index) => {
                // console.log(this.nowPhaseNo, item.growthPhaseNo)
                if (thGrowthNums < item.realDurationDays) {
                  if (index !== 0) {
                    if (
                      this.growthStepList[index - 1]["realDurationDays"] ===
                      this.growthStepList[index - 1]["thDays"]
                    ) {
                      item.thDays = thGrowthNums;
                      thGrowthNums = 0;
                    } else {
                      item.thDays = 0;
                    }
                  } else {
                    item.thDays = thGrowthNums;
                    // console.log(item.thDay)
                    thGrowthNums = 0;
                  }
                } else {
                  item.thDays = item.realDurationDays;
                  thGrowthNums = thGrowthNums - item.realDurationDays;
                  // console.log(item.thDay)
                }
                if (thGrowthNum < item.theoryDurationDays) {
                  if (index !== 0) {
                    if (
                      this.growthStepList[index - 1]["theoryDurationDays"] ===
                      this.growthStepList[index - 1]["thDay"]
                    ) {
                      item.thDay = thGrowthNum;
                      thGrowthNum = 0;
                    } else {
                      item.thDay = 0;
                    }
                  } else {
                    item.thDay = thGrowthNum;
                    // console.log(item.thDay)
                    thGrowthNum = 0;
                  }
                } else {
                  item.thDay = item.theoryDurationDays;
                  thGrowthNum = thGrowthNum - item.theoryDurationDays;
                  // console.log(item.thDay)
                }
                // console.log(thGrowthNum)
                // console.log(item.thDay, item.theoryDurationDays)
                // console.log(thGrowthNum)
                // console.log()
                // console.log(item.realDurationDays)
                // console.log(this.nowPhaseNo)
                if (
                  !item.realDurationDays ||
                  item.realDurationDays === undefined
                ) {
                  item.realDurationDays = 0;
                }
                thNum = thNum + item.theoryDurationDays;
                if (item.realDurationDays) {
                  aclNum = aclNum + item.realDurationDays;
                } else {
                  aclNum = aclNum + item.theoryDurationDays;
                }
                item.status = 0;
                item.statuss = 0;
                // console.log(!item.realDurationDays, index + 1 < this.growthStepList.length, this.growthStepList[index + 1]["thDays"])
                // console.log(item.realDurationDays && index + 1 === this.growthStepList.length &&
                //   !this.growthStepList[index + 1])
                if (
                  item.realDurationDays &&
                  index + 1 < this.growthStepList.length &&
                  !this.growthStepList[index + 1]["realDurationDays"]
                ) {
                  item.status = 1;
                } else if (
                  item.realDurationDays &&
                  index + 1 === this.growthStepList.length &&
                  !this.growthStepList[index + 1]
                ) {
                  item.status = 1;
                }
              });
              this.growthStepList.forEach((item, index) => {
                if (
                  item.thDays &&
                  index + 1 < this.growthStepList.length &&
                  this.growthStepList[index + 1]["thDays"] === 0
                ) {
                  item.statuss = 1;
                } else if (
                  item.thDays &&
                  index + 1 === this.growthStepList.length &&
                  !this.growthStepList[index + 1]
                ) {
                  item.statuss = 1;
                }
              });
              // this.aclLongWith = (aclNum / thNum) * 100 + "%";
              this.growthStepList.forEach((item, index) => {
                if (item.realDurationDays) {
                  if (
                    item.realDurationDays <= item.theoryDurationDays &&
                    item.status === 1
                  ) {
                    item.aclWidth =
                      (item.theoryDurationDays / aclNum) * 100 + "%";
                    item.specWidth =
                      (item.realDurationDays / item.theoryDurationDays) * 100 +
                      "%";
                  } else {
                    item.aclWidth =
                      (item.realDurationDays / aclNum) * 100 + "%";
                    item.specWidth = "100%";
                  }
                } else {
                  item.aclWidth =
                    (item.theoryDurationDays / aclNum) * 100 + "%";
                }
                item.thWidth = (item.theoryDurationDays / thNum) * 100 + "%";
                if (item.thDay && item.thDay !== item.theoryDurationDays) {
                  if (item.thDay <= item.theoryDurationDays) {
                    item.specThWidth =
                      (item.thDay / item.theoryDurationDays) * 100 + "%";
                  }
                }
                item.specThstatus = false;
                if (item.thDays && item.thDays !== item.realDurationDays) {
                  if (item.thDays <= item.realDurationDays) {
                    item.specThWidths =
                      (item.thDays / item.realDurationDays) * 100 + "%";
                    item.specThstatus = true;
                  }
                } else if (
                  item.thDays &&
                  item.thDays === item.realDurationDays &&
                  !this.growthStepList[index + 1]
                ) {
                  item.specThstatus = true;
                }
                item.color = this.colorList[index];
              });
            }
            // console.log(this.growthStepList)
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    changeStep() {
      this.showStepDialog = true;
      this.$refs.stepDialog.getData(this.growthList);
    }
  }
};
</script>

<style lang="scss" scoped>
.step {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-box {
  width: 100%;
  > p {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 15px;
  }
  .step-con {
    display: flex;
    height: 35px;
    > li {
      list-style: none;
      text-align: center;
      color: rgba(0, 57, 71, 1);
      border: 1px solid rgba(255, 255, 255, 1);
      position: relative;
      line-height: 35px;

      > span {
        position: relative;
        z-index: 2;
      }
      > p {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        margin: 0;
      }
    }
  }
  .theory-step {
    width: 100%;
    min-width: 100%;
    .show-time {
      display: none;
      border-radius: 10px;
      position: absolute;
      top: 35px;
      width: 200px;
      font-size: 12px;
      z-index: 2;
      background-color: #fff;
      color: #000;
      border: 1px solid rgba(255, 255, 255, 1);
      > p {
        margin: 2px;
      }
    }
    > li {
      &:hover {
        transform: scale(1);
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.7);
        cursor: pointer;
        > .show-time {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
  .actual-step {
    .nowIcon {
      position: absolute;
      top: -18px;
      width: 1px;
      height: 1px;
      display: flex;
      flex-direction: column;
      align-items: center;
      > .icon {
        position: absolute;
        width: 16px;
        top: 0px;
        left: -8px;
      }
      > p {
        position: absolute;
        width: 100px;
        top: -39px;
        left: -45px;
        color: #fff;
      }
    }
    .show-time {
      display: none;
      border-radius: 10px;
      position: absolute;
      z-index: 2;
      top: -100px;
      width: 200px;
      font-size: 12px;
      background-color: #fff;
      color: #000;
      border: 1px solid rgba(255, 255, 255, 1);
      > p {
        margin: 2px;
      }
    }
    > li {
      &:hover {
        transform: scale(1);
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.7);
        cursor: pointer;
        > .show-time {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}
.changeStepBtn {
  margin: 0 0 0 20px;
  padding: 5px 10px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  background-color: #0b8e8b;
  border: 2px solid rgba(30, 94, 90, 1);
  box-shadow: 0px 0px 4px rgba(232, 255, 254, 1);
  &:hover {
    cursor: pointer;
    animation: jelly 0.5s;
  }
}

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

  33% {
    transform: scale(0.9, 1.1);
  }

  66% {
    transform: scale(1.1, 0.9);
  }
}
.content-one {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
}
</style>
